
<template> 
<el-card class="marginTop20">
    <div>
          <!-- <el-steps :active="2" align-center finish-status="success">
            <el-step title="Step 1" description="Some description111" />
            <el-step title="Step 2" description="Some description" />
            <el-step title="Step 3" description="Some description" />
            <el-step title="Step 4" description="Some description" />
        </el-steps> -->

<el-steps :active="activeIndex" align-center>
   <el-step v-for="(item, index) in decisionList" :key="index"
        :class="item.isagree == 1 ? 'itemsetep' : (item.isagree == 0 ? 'itemError' : '')" >
      <!-- <i class="el-icon-check" slot="icon"></i> -->
        <template #icon>
               <el-icon v-if="activeIndex>index" size="30px" color="#2158F3" @mouseenter="mouseenterShow(index)"><SuccessFilled /></el-icon>
               <el-icon v-else-if="status>=10 && index==4" size="30px" color="#2158F3" @mouseenter="mouseenterShow(index)"><SuccessFilled /></el-icon>

         <!-- <div style="color: #586cb1;" v-if="item.isagree == 1">{{item.title}}</div>
         <div style="color: red;" v-if="item.isagree == 0" >{{item.title}}</div> -->
      </template>

      <el-icon><SuccessFilled /></el-icon>
      <!-- <i v-if="item.isagree == 0" class="el-icon-close" slot="icon"></i> -->
      <template #title>
         <div v-if="activeIndex>index" style="color: #2158F3;">{{item.title}}</div>
         <div v-else style="color: #555555;">{{item.title}}</div>

         <!-- <div style="color: #586cb1;" v-if="item.isagree == 1">{{item.title}}</div>
         <div style="color: red;" v-if="item.isagree == 0" >{{item.title}}</div> -->
      </template>

      <template #description>
        <div v-if="activeIndex>index" style="color: #2158F3;">{{item.title}}</div>
         <div v-else style="color: #555555;">{{item.title}}</div>
          <!-- <div style="color: #c0c4cc;">待确认</div> -->
          <!-- <div style="color: #586cb1;" v-if="item.isagree == 1">已通过</div>
          <div style="color: red;" v-if="item.isagree == 0">未通过</div> -->
      </template>
   </el-step>
   </el-steps>
    <div>
        <div class="but-for" v-if="indexShow==1">
                <div class="but-list">查看合同</div>
            </div>
            <div class="but-for" v-if="indexShow==2">
                <div class="but-list">提箱单</div>
                <div class="but-list">提箱记录</div>
            </div>
            <div class="but-for" v-if="indexShow==3">
                <div class="but-list">还箱单</div>
                <div class="but-list">还箱记录</div>
            </div>
    </div>
    </div>
    <el-row class="row-step"> 
        <template v-if="props.status < 35"> <!-- 订单未取消  -->
            <el-col :span="3" class="text-center step" :class="[props.status >= 2 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>待确认
            </el-col>
            <el-col :span="3" class="text-center step" :class="[props.status >= 3 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>待签署
            </el-col>
            <el-col :span="3" class="text-center step" :class="[props.status >= 5 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>待开提箱单
            </el-col>
            <el-col :span="3" class="text-center step" :class="[props.status >= 10 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>待提
            </el-col>
            <el-col :span="3" class="text-center step" :class="[props.status >= 15 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>已提
            </el-col>
            <el-col :span="3" class="text-center step" :class="[props.status >= 20 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>未还
            </el-col>
            <el-col :span="3" class="text-center step" :class="[props.status >= 25 ? 'arrow-col-45' : '' ]">
                <span><el-icon><SuccessFilled /></el-icon></span>
                <span v-if="isAgent">{{ returnedPay>0 ?'已还已收':'已还未收' }} </span>
                <span v-if="!isAgent">{{ returnedPay>0 ?'已还已付':'已还未付' }} </span>
            
            </el-col>
            <el-col :span="3" class="text-center step last-step" :class="[props.status >= 30 ? 'arrow-col-35' : '' ]" >
                <span><el-icon><SuccessFilled /></el-icon></span>已完成
            </el-col>
        </template>
        <template v-if="props.status >= 35">
            <el-col v-if="props.cancellationStatus >= 2" :span="3" class="text-center step35" :class="[props.status >= 2 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 2">
                    <el-icon><CircleCloseFilled /></el-icon>待确认(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>待确认</template>
            </el-col>
            <el-col v-if="props.cancellationStatus >= 3" :span="3" class="text-center step35" :class="[props.status >= 3 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 3">
                    <el-icon><CircleCloseFilled /></el-icon>待签署(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>待签署</template>     
            </el-col>
            <el-col v-if="props.cancellationStatus >= 5" :span="3" class="text-center step35" :class="[props.status >= 5 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 5">
                    <el-icon><CircleCloseFilled /></el-icon>待开提箱单(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>待开提箱单</template>
            </el-col>
            <el-col v-if="props.cancellationStatus >= 10" :span="3" class="text-center step35" :class="[props.status >= 10 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 10">
                    <el-icon><CircleCloseFilled /></el-icon>待提(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>待提</template>
            </el-col>
            <el-col v-if="props.cancellationStatus >= 15" :span="3" class="text-center step35" :class="[props.status >= 15 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 15">
                    <el-icon><CircleCloseFilled /></el-icon>已提(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>已提</template>
            </el-col>
            <el-col v-if="props.cancellationStatus >= 20" :span="3" class="text-center step35" :class="[props.status >= 20 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 20">
                    <el-icon><CircleCloseFilled /></el-icon>未还(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>未还</template>
            </el-col>
            <el-col v-if="props.cancellationStatus >= 25" :span="3" class="text-center step35" :class="[props.status >= 25 ? 'arrow-col-45-35' : '' ]">
                <template v-if="props.cancellationStatus == 25">
                    <el-icon><CircleCloseFilled /></el-icon>
                     <span v-if="isAgent">{{ returnedPay>0 ?'已还已收(已取消)':'已还未收(已取消)' }} </span>
                    <span v-if="!isAgent">{{ returnedPay>0 ?'已还已付(已取消)':'已还未付(已取消)' }} </span>
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>
                   <span v-if="isAgent">{{ returnedPay>0 ?'已还已收':'已还未收' }} </span>
                    <span v-if="!isAgent">{{ returnedPay>0 ?'已还已付':'已还未付' }} </span>
                </template>
            </el-col>
            <el-col v-if="props.cancellationStatus >= 30" :span="3" class="text-center step35 last-step" :class="[props.status >= 30 ? 'arrow-col-35' : '' ]" >
                <template v-if="props.cancellationStatus == 30">
                    <el-icon><CircleCloseFilled /></el-icon>已完成(已取消)
                </template>
                <template v-else><el-icon><SuccessFilled /></el-icon>已完成</template>
            </el-col>
            <el-col :span="6">
                <el-row class="_remark" align="middle" justify="center">
                    <el-col :offset="1" :span="6" class="text-right"><el-icon><WarningFilled /></el-icon>取消原因：</el-col>
                    <el-col :span="17">{{props.remark}}</el-col>
                </el-row>
            </el-col>
        </template>
    </el-row>
    </el-card>
</template>
  
<script lang="ts" setup>
import { computed, reactive, toRefs, watch } from 'vue'
// status 
const props = defineProps({
    status:{  // 订单所处流程节点的 2:待确认 3:待签署 5:待开提箱单 10:待提[待提未付/待提已付] 15:已提[已提未付/已提已付] 20：未还[未还已付/未还未付] 25：已还[已还已付/已还未付] 30：已完成 35:已取消
        type: Number,
        default: 2  
    },
    cancellationStatus:{  //取消订单时 订单所处的订单状态
        type: Number,
        default: 0   
    },
    remark:{ //订单取消原因
        type: String,
        default: ''
    },
     returnedPay:{  //大于0 已收或者已付
        type: Number,
        default: 0   
    },
    isAgent: {   //当前等角色  true 货代角色  false 集装箱公司角色
    type: Boolean,
    default: false   
  }
})
const activeIndex=ref(1)
const indexShow=ref(1)
watch(() => props.status, (newVal, oldVal) => {
    // status  // 订单所处流程节点的 2:待确认 3:待签署 5:待开提箱单 10:待提[待提未付/待提已付] 15:已提[已提未付/已提已付] 20：未还[未还已付/未还未付] 25：已还[已还已付/已还未付] 30：已完成 35:已取消
    if(newVal==2){
       activeIndex.value=1 
    }else if(newVal==3){
       activeIndex.value=2 
    }else if(newVal==5){
       activeIndex.value=3
    }else if(newVal==10){
       activeIndex.value=3
    }else if(newVal==15){
       activeIndex.value=3
    }else if(newVal==20){
       activeIndex.value=4
    }else if(newVal==25){
       activeIndex.value=4
    }else if(newVal==30){
       activeIndex.value=6
    }
},{immediate:true});
 const decisionList=ref([
    {
        title:'下单',
        time:'',
        status:2,

    },
    {
        title:'签署',
        time:'',
        status:3,

    },
     {
        title:'提箱',
        time:'',
        status:15,


    },
    {
        title:'还箱',
        time:'',
        status:25,


    },
    {
        title:'财务',
        time:'',
        status:15,


    },
    {
        title:'完成',
        time:'',
        status:30,


    }

 ])
 const mouseenterShow=(index)=>{
    console.log(index)
    indexShow.value=index
 }
</script>

<style lang="scss" scoped>
.row-step{
    border: 1px solid #E1E1E1;
}
.step{
    display: flex;          // 关键改动
    align-items: center;    // 关键改动
    justify-content: center; // 可选（如果需要水平居中）
    gap: 4px;     

    color: #666;
    height: 40px;
    line-height: 40px; 
    position: relative;
    font-size: 14px;
    padding-right: 40px; // 为箭头留出空间 
    &::after {
        content: "";
        position: absolute;
        right: -14px;
        top: 20px;
        transform: translateY(-50%) rotate(45deg);
        width: 27px;
        height: 27px;
        border-right: 1px solid #E1E1E1;
        border-top: 1px solid #E1E1E1;
        z-index: 1;
        // background-color: #32BB86;
    }
}
.arrow-col-45 {
  background-color: #32BB86;
  background-size: cover;
  color: #fff;
  position: relative;
  padding-right: 40px; // 为箭头留出空间 
  &::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 20px;
    transform: translateY(-50%) rotate(45deg);
    width: 27px;
    height: 27px;
    border-right: 2px solid #32BB86;
    border-top: 2px solid #32BB86;
    z-index: 1;
    background-color: #32BB86;
  }
  
    //   &:hover::after {
    //     border-color: darken(#409EFF, 10%);
    //   }
}
.arrow-col-35{
    background-color: #32BB86;
    background-size: cover;
    color: #fff;
    position: relative;
    padding-right: 40px; // 为箭头留出空间 
}
.last-step{
    &::after {
        content: "";
        border:none
    }
}
._remark{
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #eb6363;
}
.step35{
    display: flex;          // 关键改动
    align-items: center;    // 关键改动
    justify-content: center; // 可选（如果需要水平居中）
    gap: 4px;     

    color: #666;
    height: 40px;
    line-height: 40px; 
    position: relative;
    font-size: 14px;
    padding-right: 40px; // 为箭头留出空间 
    background-color: #eee;
    &::after {
        content: "";
        position: absolute;
        right: -14px;
        top: 20px;
        transform: translateY(-50%) rotate(45deg);
        width: 27px;
        height: 27px;
        border-right: 1px solid #E1E1E1;
        border-top: 1px solid #E1E1E1;
        z-index: 1;
    }
}
.arrow-col-45-35 {
  background-size: cover;
  color: #666;
  position: relative;
  padding-right: 40px; // 为箭头留出空间 
  &::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 20px;
    transform: translateY(-50%) rotate(45deg);
    width: 27px;
    height: 27px;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
    background-color: #eee;
  }
}


:deep .is-process .is-icon{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ddd;
    color: #999;
}
:deep .is-wait .is-icon{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ddd;
    color: #999;
}
.but-for{
    display: flex;
    margin-top: 20px;   
}
.but-list{
    border-radius: 4px;
    border: 1px solid #2158f3;
    color: #2158F3;
    padding: 3px 15px;
    margin-right: 20px;
    cursor: pointer;
}
</style>